<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
         <title>SimpleUI 示例中心--slider</title>
		<meta name="description" content="SimpleUI是一个基于jQuery的组件库，适合用于构建web2.0的应用程序和小型网站" />
		<meta name="keywords" content="jQuery js simple ui simpleUI web application" />
        <link type="text/css" rel="stylesheet" href="../SyntaxHighlighter/SyntaxHighlighter.css"/>
        <link type="text/css" rel="stylesheet" href="../css/core.css"/>
        <style type="text/css">
            .demo-area{padding:15px;border:1px solid #eee;background:#fbfbfb;}
            .title{margin-bottom:10px; color: #333}
            .title p{color:#999}
            .title a{padding:1px 4px; text-decoration: none; margin:0 2px}
            .title a:hover{background:#038EFE; color: #FFF}
            
           .simple-slider{ position:relative; width:100%}
            .simple-slider-list-wrap{ background:url(../../src/_beta/SimpleSlider/yinyuetai/sliderbg.png) repeat-x}
            .simple-slide-list-main{width:800px; height:385px; overflow:hidden; margin:0 auto; position:relative}
            .simple-slider-list li{ position:relative;}
            .description,.shadow{position:absolute; right:20px; top:0; width:235px;height:385px; display:none}
            .shadow{border-left:1px solid #FFF; border-right:1px solid #FFF; background:#000; opacity: .3; filter:alpha(opacity=30);}
            .description{width:195px; padding:20px;}
            .description h2{color:#FF0; font:700 20px/32px 'microsoft yahei'; margin-bottom:20px; text-align:right;}
            .description .summary{color:#FFF; font:400 14px/24px 'microsoft yahei';}

            .simple-trigger{background:url(../../src/_beta/SimpleSlider/yinyuetai/controlbar.png) repeat-x; height:22px; padding-top:2px; text-align:center;}
            .simple-trigger a{display:inline-block; width:14px; height:7px; border:1px solid #FFF; margin-right:5px; *margin-top:3px}
            .simple-trigger a:hover, .simple-trigger .current{background:#FFF}

            .simple-prev,.simple-next{position:absolute; top:160px; display:inline-block; width:20px; height:40px;}
            .simple-prev{background:url(../../src/_beta/SimpleSlider/yinyuetai/prev.png) no-repeat; left:20px}
            .simple-next{background:url(../../src/_beta/SimpleSlider/yinyuetai/next.png) no-repeat; right:20px}
            .simple-prev:hover, .simple-next:hover{top:150px; width:30px; height:60px}
            .simple-prev:hover{background:url(../../src/_beta/SimpleSlider/yinyuetai/prevhover.png) no-repeat}
            .simple-next:hover{background:url(../../src/_beta/SimpleSlider/yinyuetai/nexthover.png) no-repeat}
        </style>
    </head>
    <body>
        <div class="container clearfix" id="hd">
            <h1 class="s-logo"></h1>
            <div class="s-nav">
                <span class="s-nav-l"></span>
                <span class="s-nav-r"></span>
                <ul class="clearfix">
                    <li>
                        <a href="/doc">文档</a>
                    </li>
                    <li class="current">
                        <a href="/doc/demo.html">示例</a>
                    </li>
                    <li>
                       <a href="http://simpleui.org/simpleUI.rar">下载</a>
                    </li>
                    <li >
                        <a href="/doc/deploy.html">部署</a>
                    </li>
                    <li>
                        <a href="#">关于</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container" id="bd">
            <h2 class="s-title">SimpleUI示例中心</h2>
            <div class="clearfix doc-content demo-content">
                <div class="api-content">
                    <h2 class="api-name">SimpleSlider Demo</h2>
                    <h3 class="api-guide">图片轮换调用实例(自定义triggers)</h3>
                    <textarea name="code" class="js"> 
                     $('.simple-slider').slider({
                        content : '.simple-slider-list li',
                        trigger : true,
                        prev : '.simple-prev',
                        next : '.simple-next',
                        triggerClass : 'simple-trigger',
                        triggerCurrentClass : 'current',
                        delay : 400,
                        speed : 200,
                        timeout : 5000,
                        direction : 'left',
                        template : '<div simpleEvent="trigger"><s:each><a href="javascript:;"></a></s:each></div>',
                        ontrigger : function(index){
                            var s = this,el = s.content.eq(index);
                            el.find(".shadow").hide();
                            el.find(".description").hide();
                        },
                        ontriggered : function(index){
                            var s = this,el = s.content.eq(index);
                            el.find(".shadow").fadeIn(1000, function(){
                                $(this).css('opacity', '0.3')
                            });
                            el.find(".description").fadeIn(1000);
                        }
                    });
                    </textarea>
                    <div class="demo-area">
                        <div class="title">
                            <p>实现<a href="http://www.yinyuetai.com/">音乐台</a>的的幻灯效果</p>
                        </div>
                        
                        <div class="simple-slider">
                            <div class="simple-slider-list-wrap">
                                <div class="simple-slide-list-main">
                                <ul class="simple-slider-list">
                                    <li>
                                        <a href="#"><img src="../../src/_beta/SimpleSlider/yinyuetai/45190133599BAA529FB25BA72C5365F8.jpg"/ alt="ooxx"></a>
                                        <div class="shadow"></div>
                                        <div class="description">
                                            <h2>
                                                独家首发<br/>
                                                弦子《逆风的蔷薇》
                                            </h2>				
                                            <div class="summary">
                                             镜头前他舞跳得帅气利落，新曲走R&B周式曲风曲风，描写分手情人心情的歌词出自周董手笔，，描曲风，描写分手情人心情的歌词出自周董手笔，写分手情人心情的歌词出自周董手笔，他一手包办词曲，周杰伦也请舞蹈老师雪糕特意编了一段“雨伞舞”师雪糕特意编了一段“雨伞舞”。
                                            </div>	
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><img src="../../src/_beta/SimpleSlider/yinyuetai/A3D101335D073599F922198A994E2302.jpg"/ alt="ooxx"></a>
                                        <div class="shadow"></div>
                                        <div class="description">
                                            <h2>
                                                Tablo feat. 太阳<br/>
                                                《Tomorrow》
                                            </h2>				
                                            <div class="summary">
                                             镜头前他舞跳得帅气利落，新曲走R&B周式曲风曲风，描写分手情人心情的歌词出自周董手笔，，描曲风，描写分手情人心情的歌词出自周董手笔，写分手情人心情的歌词出自周董手笔，他一手包办词曲，周杰伦也请舞蹈老师雪糕特意编了一段“雨伞舞”师雪糕特意编了一段“雨伞舞”。
                                            </div>	
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><img src="../../src/_beta/SimpleSlider/yinyuetai/FA5001335CE189C8F2112D29E586921C.jpg"/ alt="ooxx"></a>
                                        <div class="shadow"></div>
                                        <div class="description">
                                            <h2>
                                                音乐大来宾<br/>
                                                分列进行式 苏醒
                                            </h2>				
                                            <div class="summary">
                                             镜头前他舞跳得帅气利落，新曲走R&B周式曲风曲风，描写分手情人心情的歌词出自周董手笔，，描曲风，描写分手情人心情的歌词出自周董手笔，写分手情人心情的歌词出自周董手笔，他一手包办词曲，周杰伦也请舞蹈老师雪糕特意编了一段“雨伞舞”师雪糕特意编了一段“雨伞舞”。
                                            </div>	
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><img src="../../src/_beta/SimpleSlider/yinyuetai/A0EC013358E9C2C69BCDD0BF04A5AC9C.jpg"/ alt="ooxx"></a>
                                        <div class="shadow"></div>
                                        <div class="description">
                                            <h2>
                                                独家首发<br/>
                                                MIC男团<br/>
                                                《Get It Hot》
                                            </h2>				
                                            <div class="summary">
                                             镜头前他舞跳得帅气利落，新曲走R&B周式曲风曲风，描写分手情人心情的歌词出自周董手笔，，描曲风，描写分手情人心情的歌词出自周董手笔，写分手情人心情的歌词出自周董手笔，他一手包办词曲，周杰伦也请舞蹈老师雪糕特意编了一段“雨伞舞”师雪糕特意编了一段“雨伞舞”。
                                            </div>	
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><img src="../../src/_beta/SimpleSlider/yinyuetai/31EC01334A2982F0513F5E9030D505D2.jpg"/ alt="ooxx"></a>
                                        <div class="shadow"></div>
                                        <div class="description">
                                            <h2>
                                                LADY GAGA<br/>
                                                时代巨星成名之路
                                            </h2>				
                                            <div class="summary">
                                             镜头前他舞跳得帅气利落，新曲走R&B周式曲风曲风，描写分手情人心情的歌词出自周董手笔，，描曲风，描写分手情人心情的歌词出自周董手笔，写分手情人心情的歌词出自周董手笔，他一手包办词曲，周杰伦也请舞蹈老师雪糕特意编了一段“雨伞舞”师雪糕特意编了一段“雨伞舞”。
                                            </div>	
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#"><img src="../../src/_beta/SimpleSlider/yinyuetai/EA72013344B66C5BF0FB4F6285C2101B.jpg"/ alt="ooxx"></a>
                                        <div class="shadow"></div>
                                        <div class="description">
                                            <h2>
                                                独家首发<br/>
                                                尚雯婕<br/>
                                                《擦 好长的歌名》
                                            </h2>				
                                            <div class="summary">
                                             镜头前他舞跳得帅气利落，新曲走R&B周式曲风曲风，描写分手情人心情的歌词出自周董手笔，，描曲风，描写分手情人心情的歌词出自周董手笔，写分手情人心情的歌词出自周董手笔，他一手包办词曲，周杰伦也请舞蹈老师雪糕特意编了一段“雨伞舞”师雪糕特意编了一段“雨伞舞”。
                                            </div>	
                                        </div>
                                    </li>
                                </ul>
                                </div>
                                <a href="javascript:;" class="simple-prev"></a>
                                <a href="javascript:;" class="simple-next"></a>
                            </div>
                        </div>
                        <!-- -->
                    </div>
               
                </div>
            </div>
        </div>
        <script src="../SyntaxHighlighter/shCore.js"></script>
        <script src="../SyntaxHighlighter/allmin.js"></script>
        <script type="text/javascript">
            dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/clipboard.swf';
            dp.SyntaxHighlighter.HighlightAll('code');
        </script>
        <script type="text/javascript" src="../../src/jquery.js"></script>
        <script type="text/javascript" src="../../src/_beta/SimpleCore.js"></script>
        <script type="text/javascript" src="../../src/_beta/SimpleSlider/SimpleSlider_v1.1.js"></script>
        <script type="text/javascript">
        $('.simple-slider').slider({
            content : '.simple-slider-list li',
            trigger : true,
            prev : '.simple-prev',
            next : '.simple-next',
            triggerClass : 'simple-trigger',
            triggerCurrentClass : 'current',
            delay : 400,
            speed : 200,
            timeout : 5000,
            direction : 'left',
            template : '<div simpleEvent="trigger"><s:each><a href="javascript:;"></a></s:each></div>',
            ontrigger : function(index){
                var s = this,el = s.content.eq(index);
                el.find(".shadow").hide();
                el.find(".description").hide();
            },
            ontriggered : function(index){
                var s = this,el = s.content.eq(index);
                el.find(".shadow").fadeIn(1000, function(){
                    $(this).css('opacity', '0.3')
                });
                el.find(".description").fadeIn(1000);
            }
        });
        </script>
    </body>
</html>
